<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-div">
          <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        </div>
        <div class="head-search">职位管理</div>
        <div @click="go('/newJob')">添加</div>
      </div>
    </div>
    <div class="content">
      <div class="content" style="overflow: auto;"
           v-infinite-scroll="loadMore"
           infinite-scroll-disabled="loading"
           infinite-scroll-distance="1">
        <div class="block" v-for="item in list">
          <div class="block-top">
            <span>{{ item.title }}</span>
<!--            如果都不等于，显示一个默认状态-->
            <span style="position: relative; z-index: 50" v-show="item.recruitStatus !== 1 && item.recruitStatus !== 2 && item.recruitStatus !== 0">当前排名：未上榜</span>
            <span style="position: relative; z-index: 50" v-show="item.recruitStatus === 1">待审核</span>
            <span style="position: relative; z-index: 50" v-show="item.recruitStatus === 2">停用状态</span>
<!--            ph是排行-->
            <span style="position: relative; z-index: 50" v-show="item.recruitStatus === 0 && item.ph <= 3">当前排名{{ item.ph }}</span>
            <span style="position: relative; z-index: 50" v-show="item.recruitStatus === 0 && item.ph > 3">当前排名：未上榜</span>
          </div>
          <div class="block-button">
            <!--初始新增职位 1是待审核，待审核的情况下是不可以修改的-->
            <div v-show="item.recruitStatus === 1" class="blue" @click="reload(item.id)">刷新</div>
            <div v-show="item.recruitStatus === 1" class="blue" @click="update(item.id)">修改</div>
            <!--职位审核通过 0-->
            <div v-show="item.recruitStatus === 0" class="blue" @click="stopOn(item.id)">停用</div>
            <div v-show="item.recruitStatus === 0" class="blue" @click="reload(item.id)">刷新</div>
            <div v-show="item.recruitStatus === 0" class="green" @click="goPrice(item.id)">竞价</div>
            <!--职位停用 2-->
            <div v-show="item.recruitStatus === 2" class="blue" @click="startOn(item.id)">启用</div>
            <div v-show="item.recruitStatus === 2" class="blue" @click="reload(item.id)">刷新</div>
            <div v-show="item.recruitStatus === 2" class="blue" @click="update(item.id)">修改</div>
            <!--删除-->
            <div class="gray" @click="delOn(item.id)">删除</div>

  <!--          <div class="blue" v-show="item.recruitStatus == 0" @click="stopOn(item.id)">-->
  <!--            停用-->
  <!--          </div>-->
  <!--          <div class="blue" v-show="item.recruitStatus == 2" @click="startOn()">启用</div>-->
  <!--          <div class="blue" v-show="item.recruitStatus != 0 && item.recruitStatus != 3">修改</div>-->
  <!--          <div class="green" @click="goPrice()">竞价</div>-->
  <!--          <div class="green" v-show="item.recruitStatus == 1">待审核</div>-->
  <!--          <div class="gray" @click="delOn()">删除</div>-->
          </div>
        </div>
        <div v-show="loading===true" class="load">
          <span v-show="loads===true">已经到底了</span>
          <span v-show="loads===false">加载中</span>
        </div>
      </div>
    </div>
    <mt-popup v-model="popupVisible" position="center">
      <p>竞价排名</p>
      <input type="text" v-model="bidPriceNum" :placeholder="title" />
      <div class="pop-btn">
        <span @click="off()">取消</span>
        <span @click="on()">确认</span>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { Popup, MessageBox, Toast } from 'mint-ui'
import Vue from 'vue'
import da from 'element-ui/src/locale/lang/da'
export default {
  name: 'job',
  components: { Popup, MessageBox, Toast },
  created () {
    this.reloadCompanyBidData()
  },
  mounted () {
    this.reload_list()
  },
  // data() 为变量赋值等
  data () {
    return {
      member_points: 0,
      cur_bid: 0,
      bef_bid: 0,
      bidPriceNum: null,
      bidPriceRecuritId: null,
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      compantBidList: [],
      list: [
        {
          job: 'web前端开发',
          type: 0
        },
        {
          job: 'web前端开发',
          type: 1
        },
        {
          job: 'web前端开发',
          type: 3
        }
      ],
      popupVisible: false,
      title: '',
      pageSize: 20,
      pageNum: 1,
      loading: true,
      loads: false
    }
  },
  // methods 编写js函数
  methods: {
    loadMore () {
      console.log('loadMore.....')
      if (this.loading === false) {
        this.loading = true
        setTimeout(() => {
          this.pageNum = this.pageNum + 1

          this.getIndexData()
          // alert("开始加载")
        }, 1500)
      }
    },
    reload_list () {
      var that = this// 全局变量转局部变量
      let companyId = localStorage.getItem('cache_company_id')
      // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/get/company/recruit/bid',
        params: {}
      }).then(({ data }) => {
        console.log('=========', data)
        if (data) {
          this.compantBidList = data
        }

        this.$http({
          method: 'get',
          url: Vue.prototype.AppURL + '/comuser/get/recruit',
          params: {companyId: companyId}
        }).then(({ data }) => {
          this.list = data
          this.list.forEach((item) => {
            item.ph = this.getP((item.id)) - 0// ，通过 - 0 的方式可以将一个值转换为数字类型。转int
            if (!item.ph) {
              item.ph = 999// 999是标记未上榜的就是非前三名.可以是任何数字,只要大于3
            }
          })

          // 判断是否是最后一页
          if (data.length <= that.pageSize) { // 当查询的总条数小于每页的总条数时候
            that.loading = true// true是不显示
            that.loads = true
          } else {
            // 可以继续上拉更新
            that.loading = false// false是显示
            that.loads = false
          }
        })
      })
    },
    getP (rid) {
      for (var i = 0; i <= this.compantBidList.length; i++) {
        if (this.compantBidList[i]) {
          if (this.compantBidList[i].id == rid) {
            return i + 1
          }
        }
      }
    },
    reloadCompanyBidData () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/get/company/recruit/bid',
        params: {}
      }).then(({ data }) => {
        console.log('=========', data)
        if (data) {
          this.compantBidList = data
        }
      })
    },
    reload () { // 刷新职位，
      let companyId = localStorage.getItem('cache_company_id')
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/reload/recruit/date',
        params: {id: companyId}
      }).then(({ data }) => {
        console.log(data)
        // 调用了刷新列表的方法
        this.reload_list()
      })
    },
    back () {
      this.$router.push({name: 'companyMy'})
    },
    go (r) {
      this.$router.push(r)
    },
    off () {
      this.popupVisible = false
    },
    on () {
      if (this.bidPriceNum === null) {
        Toast('请输入竞价积分')
        return
      }

      this.popupVisible = false

      if (this.bidPriceNum > this.member_points) {
        this.popupVisible = true
        Toast({
          message: '根据你的账户金额,你最多竞价' + this.member_points + '分',
          position: 'top',
          duration: 2000
        })
        // Toast('根据你的账户金额,你最多竞价' + this.member_points + '分')
        // this.bidPriceNum = null
        return
      }

      this.$http({
        method: 'post',
        url: Vue.prototype.AppURL + '/comuser/update/recruit/bid',
        params: {
          id: this.bidPriceRecuritId,
          bid: this.bidPriceNum === null ? '' : this.bidPriceNum
        }
      }).then(({ data }) => {
        console.log(data)
        if (data) {
          Toast('竞价成功')
        } else {
          Toast('操作失败')
        }
        this.bidPriceNum = null
        this.reload()
      })
    },
    goPrice (item) {
      // 把数据回显
      this.popupVisible = true
      // 点击竞价会获取该行数据，
      this.bidPriceRecuritId = item

      let companyId = localStorage.getItem('cache_company_id')
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/comuser/bid/recruit/data',
        params: {id: companyId, bidPriceRecuritId: this.bidPriceRecuritId}
      }).then(({ data }) => {
        console.log(data)
        // 计算本地竞价可输入分值
        this.member_points = (data.member_points - 0) / 5
        // cur是当前竞价，bef是上次竞价
        this.cur_bid = data.cur_bid

        let cu_title = '您最大竞价' + this.member_points + '分您上次竟价' + data.bef_bid + '分'
        this.title = cu_title
      })
    },
    update (item) {
      localStorage.setItem('currUpdateRecuritId', item)
      this.$router.push({name: 'updateJob', params: { 'recuritId': item }})
    },
    stopOn (item) {
      MessageBox.confirm('确定要停用该职位吗?').then((action) => {
        this.$http({
          method: 'post',
          url: Vue.prototype.AppURL + '/comuser/update/recruit/status',
          params: {
            type: '0',
            recruitId: item,
            status: 2
          }
        }).then(({ data }) => {
          if (data) {
            Toast('操作成功')
          } else {
            Toast('操作失败')
          }
          this.reload_list()
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    startOn (item) {
      MessageBox.confirm('确定要启用该职位吗?').then((action) => {
        this.$http({
          method: 'post',
          url: Vue.prototype.AppURL + '/comuser/update/recruit/status',
          params: {
            type: '1',
            recruitId: item,
            status: 0
          }
        }).then(({ data }) => {
          if (data) {
            Toast('操作成功')
          } else {
            Toast('操作失败')
          }
          this.reload_list()
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    delOn (item) {
      MessageBox.confirm('确定要删除该职位吗?').then((action) => {
        this.$http({
          method: 'post',
          url: Vue.prototype.AppURL + '/comuser/update/recruit/status',
          params: {
            type: '2',
            recruitId: item,
            status: 99
          }
        }).then(({ data }) => {
          if (data) {
            Toast('操作成功')
          } else {
            Toast('操作失败')
          }
          this.reload_list()
        })
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 43px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  flex: 1;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 43px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
.block {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px 10px 10px;
  background: #fff;
  margin-bottom: 10px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.block .block-top {
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.block-top span:first-child {
  color: #333;
  font-weight: 700;
}
.block-top span:last-child {
  color: #3e63a8;
}
.block-calss {
  width: 100%;
}
.block-class span {
  color: #757575;
  font-size: 10px;
  padding: 2px 0px;
  border-radius: 3px;
  margin-right: 10px;
}

.block-button {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.block-button div {
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.blue {
  background: #3e63a8;
}
.green {
  background: #53ca67;
}
.gray {
  background: #c7c7c7;
}
.mint-popup {
  border-radius: 20px;
  width: 80%;
  height: 25%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
}
.mint-popup p {
  width: 100%;
  box-sizing: border-box;
  padding-top: 10px;
  text-align: center;
}
.pop-text {
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.mint-popup input {
  width: 70%;
  height: 30px;
  outline: none;
}
.pop-btn {
  width: 100%;
  display: flex;
  border-top: 1px solid #ccc;
  box-sizing: border-box;
}
.pop-btn span {
  width: 50%;
  text-align: center;
  box-sizing: border-box;
  color: #3e63a8;
  padding: 10px 0;
}
.pop-btn span:first-child {
  border-right: 1px solid #ccc;
}
.load {
  font-size: 12px;
  color: #333;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}
</style>
